<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="bindEvent">
        <input type="button" value="v-on简写" @click="bindEvent">
        <input type="button" value="v-on简写" @dblclick="bindEvent">
        <p @click="addStr">{{str}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                str:"喧腾爱吃"
            },
            methods:{
                bindEvent:function(){
                    alert('事件调用了');
                },
                addStr:function(){
                    this.str+='屎'
                }
            }
        });
        // （1）v-on的作用是为元素绑定事件
        // （2）事件名不需要写on
        // （3）指令可以简写为@
        // （4）绑定方法写在methods中
        // （5）方法内部通过this关键字可以访问定义在data中的对象
        // （6）dblclick双击事件
    </script>
</body>
</html>